<template>
  <div>父组件
    <h1>组件通信</h1>
    <h2 class="red">父子组件通信</h2>
    <address>父组件传递信息后,子组件通过props接受数据,并且可以通过type定义类型
      通过default设置默认值
    </address>
    <!-- <children @changeParentMsg="changeParentMsg" :childrenMes="childrenMes" :msg2="childrenMes1"></children> -->
    <children :childrenMes.sync="childrenMes" :msg2="childrenMes1"></children>
    <h2 class="red">子父组件通信</h2>
    <address>
      子组件中$emit派发一个自定义事件,第二个参数就是传递的数据,父组件中,监听这个事件
      获取传递过来的数据
      子组件中,this.$emit("自定义事件名",参数)
    </address>
    <children2 ref="children2" @parentGetMsg="getMsg"></children2>
    <h2 class="red">兄弟组件通信</h2>
    <address>
      vue中同一个实例通过$emit派发的事件,能够被$on监听到

    </address>
    <h2 class="red">4.跨层组件通信</h2>
    <address>
      主要是用了provider inject进行跨组件通信
    </address>
  </div>
</template>

<script>
// const s = Symbol();
import children from "./children.vue"
import children2 from "./childrenTwo.vue"
export default {
  components: {
    children,
    children2
  },
  props: {},
  provide () {
    return {
      test: 'foo',
      getMsg: this.getMsg
    }
  },
  data () {
    return {
      childrenMes: "我是父组件信息",
      childrenMes1: {
        msg: "我是一段信息",
        date: "2024年2月26日 11:05:14"
      }
    }
  },
  computed: {},
  methods: {
    getMsg (res) {
      console.log("我在父组件中,得到的信息是", res)
    },
    // changeParentMsg (msg) {
    //   this.childrenMes = msg
    // }
  },
  created () {
    // this.$refs.children2
  },
  mounted () {

    console.log("this.$refs.children2", this.$refs.children2)
    // 父组件调用子组件的方法: 获取子组件元素
    this.$refs.children2.sendMsg()

  },
}
</script>
<style scoped>
.red {
  color: red;
}
</style>